<!-- 消防检查 -->
<template>
	<view class="page">
    <view class="subsection">
      <view class="sub_t">
        <view
            style="margin-left: 0"
            class="sub_col"
            :class="tabIndex == 2 ? 'sub_t_ac' : ''"
            @click="selectState(2)"
        >
          位置
          <u-icon name="arrow-down" size="14" class="wicon"></u-icon>
        </view>
        <view
            class="sub_col"
            :class="tabIndex == 1 ? 'sub_t_ac' : ''"
            @click="selectState(1)"
        >
          已租
        </view>
        <view
            class="sub_col"
            :class="tabIndex == 0 ? 'sub_t_ac' : ''"
            @click="selectState(0)"
        >
          待租
        </view>
      </view>
    </view>
    <mescroll-body
        class="bttms_scroll"
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOption"
        @down="downCallback"
        top="50"
        @up="upCallback"
    >
      <view class="bd-info" v-for="(item,index) in dataList" :key="index">
        <view class="col">
          <text>A1-1栋22-02旁</text>
          <view class="wxbtn" :style="{background:btnColor(item),color:txtColor(item)}">正常</view>
        </view>
        <view class="col">
          <text class="date">检查日期：2021/10/11</text>
          <text style="color: #999999">
            检查人：谢春华
          </text>
        </view>
      </view>
    </mescroll-body>

		<view class="xb-bottom-btn" @click="navTo('/pageSecurity/fireCheck/fireCheckAdd')">
			<u-icon name="plus" class="icon"></u-icon>
			<text>添加检查</text>
		</view>

    <u-select
        v-model="show"
        cancel-color="#999999"
        confirm-color="#44D94B"
        value-name="id"
        label-name="name"
        child-name="buildingInfoVOList"
        mode="mutil-column-auto"
        :list="buiParkList"
        @cancel="cancel"
        @confirm="confirm"
    ></u-select>

	</view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
    mixins:[
      MescrollMixin
    ],
		data() {
			return {
        dataList:[],
        tabIndex: 2,
        show: false,
        buiParkList: [],
        downOption: {
          page: {
            num: 0,
            size: 10,
            time: null,
          },
          auto: false, //是否在初始化后,自动执行downCallback; 默认true
        },
			};
		},
		computed: {
			txt() {
				return (val) => {
					let txt = "正常"
					if (val % 2 == 0) {
						txt = "故障"
					} else if (val % 3 == 0) {
						txt = "停用"
					}
					return txt
				}
			},
			txtColor() {
				return (val) => {
					let color = "rgba(68, 217, 75, 1)"
					if (val % 2 == 0) {
						color = "rgba(247, 77, 57, 1)"
					} else if (val % 3 == 0) {
						color = "rgba(51, 51, 51, 1)"
					}
					return color
				}
			},
			btnColor() {
				return (val) => {
					let opacity = '0.15'
					let color = `rgba(68, 217, 75, ${opacity})`
					if (val % 2 == 0) {
						color = `rgba(247, 77, 57, ${opacity})`
					} else if (val % 3 == 0) {
						color = `rgba(51, 51, 51, ${opacity})`
					}
					return color
				}
			}
		},
    onLoad(){
      this.getBuiParkList();
    },
    methods:{
      getBuiParkList(title) {
        //联网加载数据
        this.apis.commonApi
            .buiParkListTree()
            .then((res) => {
              this.buiParkList = res.data;
              console.log(this.buiParkList)
            })
            .catch(() => {});
      },
      selectState(state) {
        this.tabIndex = state;
        this.dataList = [];
        this.leaseState = state;
        if (state == 2) {
          this.leaseState = "";
          this.show = true;
          this.mescroll.resetUpScroll();
        } else {
          this.mescroll.resetUpScroll();
        }
      },
      downCallback(){
        this.dataList = []
        this.mescroll.resetUpScroll();
      },
      upCallback(page) {
        //联网加载数据
        this.apis.securityApi
            .afElevatorList({
              pageNum: page.num,
              pageSize: page.size,
            })
            .then((res) => {
              this.dataList = this.dataList.concat(res.rows);
              this.mescroll.endBySize(res.rows.length, res.total);
            })
            .catch(() => {
              //联网失败的回调,隐藏下拉刷新的状态
              this.mescroll.endErr();
            });
      }
    }
	}
</script>

<style lang="scss">
	.page{
		padding-bottom: 112upx;
	}
	.wxbtn {
		display: inline-block;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #44D94B;
		line-height: 34upx;
		padding: 4upx 10upx;
		background: rgba(#44D94B, 0.15);
	}

	.date {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.xb-bottom-btn {
		// background: #FFFFFF;
		// color: #44D94B;
		.icon{
			margin-right: 10upx;
		}
	}

  .subsection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 20rpx 40rpx;

    .sub_t {
      z-index: 2;
      position: fixed;
      top: 0;
      /* #ifdef H5 */
      top: 88rpx;
      /* #endif */
      padding: 22rpx 40rpx;
      left: 0;
      width: 100vw;
      background: #ffffff;
      display: flex;

      .sub_col {
        box-sizing: border-box;
        // min-width: 152rpx;
        margin-left: 20rpx;
        height: 46rpx;
        background: #f2f2f2;
        border-radius: 24rpx;
        font-size: 24rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        @include flexCenter;
        justify-content: space-evenly;
        .wicon {
          width: 0 !important;
        }
      }

      .sub_t_ac {
        background: rgba(68, 217, 75, 0.1);
        border: 1rpx solid #44d94b;
        color: #44d94b;
      }
    }

    view {
      width: 33%;
    }
  }
</style>
